<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>列表优化</title>
    <!--视口                             屏幕的宽是设备的宽                                            不让缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <!--<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">让ie支持新技术-->
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div class="container"><!--div class="container"   是固定布局 居中-->
    <!--div class="container-fluid"   是流式布局  占满屏-->

            <ul class="list-group"> <!--list-group 表示列表小组-->
                <li class="list-group-item">h5</li><!--list-group-item 表示列表项-->
                <li class="list-group-item list-group-item-danger"><!--list-group-item-danger 加色-->
                    bootstrap
                <span class="badge">10分</span>
                </li><!--list-group-item 表示列表项    badge徽章   是小圆里面放文字-->
                <li class="list-group-item">javascript</li><!--list-group-item 表示列表项-->
            </ul>

        </div>
</body>
</html>